package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/input"
	"github.com/templui/templui/internal/components/label"
	"github.com/templui/templui/internal/components/sheet"
)

templ SheetDefault() {
	@sheet.Sheet(sheet.Props{
		Side: sheet.SideRight,
	}) {
		@sheet.Trigger() {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Open
			}
		}
		@sheet.Content() {
			@sheet.Header() {
				@sheet.Title() {
					Edit profile
				}
				@sheet.Description() {
					Make changes to your profile here. Click save when you're done.
				}
			}
			<div class="grid flex-1 auto-rows-min gap-6 px-4">
				<div class="grid gap-3">
					@label.Label(label.Props{
						For: "sheet-demo-name",
					}) {
						Name
					}
					@input.Input(input.Props{
						ID:    "sheet-demo-name",
						Type:  input.TypeText,
						Value: "Pedro Duarte",
					})
				</div>
				<div class="grid gap-3">
					@label.Label(label.Props{
						For: "sheet-demo-username",
					}) {
						Username
					}
					@input.Input(input.Props{
						ID:    "sheet-demo-username",
						Type:  input.TypeText,
						Value: "@peduarte",
					})
				</div>
			</div>
			@sheet.Footer() {
				@button.Button(button.Props{
					Type: "submit",
				}) {
					Save changes
				}
				@sheet.Close() {
					@button.Button(button.Props{
						Variant: button.VariantOutline,
					}) {
						Close
					}
				}
			}
		}
	}
}
